var _this;
// 定义分页组件
Vue.component("page1", {
    template: `
	<div>
		<div>
			<table id="tb" lay-even class="layui-table ">
					<colgroup>
			<col width="150">
			<col width="200">
			<col>
		</colgroup>
				<thead>
					<tr>
						<td v-for="column in columns" v-text="column.text" ></td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(obj,index) in data">
						<td v-for="(column,index) in columns" v-if="index!==6" v-text="index==2?renderTime(obj[column.property]):obj[column.property]"></td>
						<td>  <button type="button" ata-toggle="modal" data-target="#addUserModal" class="layui-btn layui-btn-sm " @click="updateCheckin(obj.in_att_attgroup_id)"> <i class="layui-icon" >&#xe642;</i></button>
							 <button type="button"  class="layui-btn layui-btn-sm layui-btn-danger" @click="deleteCheckin(obj.in_att_attgroup_id)"> <i class="layui-icon" >&#xe640;</i></button>
						</td>
					</tr>
				</tbody>
			</table>
			</div>
		<div class="row">
			<div class="col-lg-4" style="line-height:80px">
				共<span id="dataCount" v-if="page!=null" class="text-danger" v-text="page.dataCount"></span>条数据
				共<span id="pageCount" v-if="page!=null" class="text-danger" v-text="page.pageCount"></span>页数据
				当前是第<span id="pi"  v-if="page!=null" class="text-danger" v-text="page.pageIndex"></span>页
			</div>
			<div class="col-lg-2" style="line-height:80px">
				每页显示
				<select v-model="example.number">
					<option value="1">1</option>
					<option value="5">5</option>
					<option value="10">10</option>
				</select>条
			</div>
			<div class="col-lg-4">
				<ul class="pagination" v-if="page!=null">
					<li v-for="button in buttons" :class="button.active?'active':'' "><a href="javascript:" v-text="button.no" @click="to(button.no)"></a></li>
				</ul>
			</div>
			<div class="col-lg-2">
				<ul class="pagination">
					<li><a href="javascript:" @click="prev()" class="layui-btn layui-btn-normal">上一页</a></li>
					<li><a href="javascript:" @click="next()" class="layui-btn layui-btn-normal">下一页</a></li>
				</ul>
			</div>
		</div>
	</div>
	`,
    data: function () {
        return {
            data: [],
            page: {},
            buttons: [],
            message: "",
            Id: -1,
        };
    },

    props: {
        url: {
            type: String
        },
        example: {
            type: Object
        },
        columns: {
            type: Array
        }
    },
    created: function () {
        _this = this;
        this.selectByExample();
        console.log(_this.columns);
    },

    methods: {
        renderTime: function (date) {
            var dateee = new Date(date).toJSON();
            return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
        },
        selectByExample: function () {
            $.ajax({
                url: _this.url,
                type: "get",
                data: _this.example,
                // {"start":_this.example.start.toString(),"end":_this.example.end.toString(),"page":{"pageIndex":_this.example.pageIndex, "number":_this.example.number},"status":_this.example.status},
                success: function (data) {
                    if (data.obj.pageIndex > data.obj.pageCount) {
                        _this.example.pageIndex = data.obj.pageCount;
                    } else {
                        _this.data = data.list;
                        _this.page = data.obj;
                        _this.buttons = [];
                        // 取出page.pageIndex
                        for (var i = data.obj.pageIndex - 3; i < data.obj.pageIndex; i++) {
                            if (i >= 1) {
                                _this.buttons.push({no: i, active: false});
                            }
                        }
                        _this.buttons.push({no: data.obj.pageIndex, active: true});
                        for (var i = data.obj.pageIndex + 1; i < data.obj.pageIndex + 3; i++) {
                            if (i <= data.obj.pageCount) {
                                _this.buttons.push({no: i, active: false});
                            }
                        }
                    }
                },
                error: function () {

                }
            });
        },
        to: function (index) {
            this.example.pageIndex = index;
        },
        prev: function () {
            if (this.example.pageIndex > 1) {
                this.example.pageIndex = this.example.pageIndex - 1;
            }
        },
        next: function () {
            if (this.example.pageIndex < this.page.pageCount) {
                this.example.pageIndex = this.example.pageIndex + 1;
            }
        },

        updateCheckin: function (id) {
            //操作弹出框
            _this.Id = id;
            alert(_this.Id);
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    content: '请选择操作：',
                    title: '审核操作'
                    , btn: ['批准上架请求', '拒绝上架请求']
                    , btn1: function (index) {
                        //按钮【按钮一】的回调
                        layer.prompt({
                                title: '审核意见：',
                                formType: 2,
                                skin: 'layui-layer-molv',
                                offset: 'auto',
                                area: ['500px', '300px'],
                            },
                            function (value, index) {
                                _this.message = value;
                                alert(_this.message); //得到value
                                alert(_this.Id);
                                $.ajax({
                                    url: "exam/update",
                                    type: "post",
                                    data: {Id: _this.Id, result: 1, message: _this.message},
                                    success: function (data) {
                                        if (data.obj == 1) {
                                            alert("操作成功");
                                        }
                                        layer.close(index);
                                        window.location.reload();
                                    },
                                    error: function () {
                                    }
                                });
                                layer.close(index);
                            }
                        );
                        layer.close(index);
                    }
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        layer.prompt({
                                title: '审核意见：',
                                formType: 2,
                                skin: 'layui-layer-molv',
                                offset: 'auto',
                                area: ['500px', '300px'],
                            },
                            function (value, index) {
                                _this.message = value;
                                alert(_this.message); //得到value
                                alert(_this.Id);
                                $.ajax({
                                    url: "exam/update",
                                    type: "post",
                                    data: {Id: _this.Id, result: 2, message: _this.message},
                                    success: function (data) {
                                        if (data.obj == 1) {
                                            alert("操作成功");
                                        }
                                        layer.close(index);
                                        window.location.reload();
                                    },
                                    error: function () {
                                    }
                                });
                                layer.close(index);
                            }
                        );
                        layer.close(index);
                    }

                    , cancel: function () {
                        //右上角关闭回调

                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                });
            });

        },

        deleteCheckin: function (id) {
            //操作弹出框
            console.log("进来了");
            _this.Id = id;
            alert(_this.Id);
            layer.open({
                content: '确认删除该考勤组吗？'
                , btn: ['确认', '取消']
                , yes: function (index, layero) {
                    //按钮【按钮一】的回调
                    console.log("yyy");
                    alert(_this.Id);
                    $.ajax({
                        url: "/deleteCheckin",
                        type: "post",
                        data: {Id: _this.Id},
                        success: function (data) {
                            alert(data.message);
                            layer.close(index);
                            window.location.reload();
                        },
                        error: function (data) {
                            alert(data.message);
                        }
                    });
                }
                , btn2: function (index, layero) {
                    //按钮【按钮二】的回调
                    console.log("nnn");
                    //return false 开启该代码可禁止点击该按钮关闭
                }
                , cancel: function () {
                    //右上角关闭回调
                    layer.close();
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
        },
    },


    watch: {
        example: {
            handler: function (o, n) {
                this.selectByExample();
            },
            deep: true
        }
    }
});